<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vue 的Component-3组件</title>
	</head>

	<body>
		<div id="app">
			<h3>Component-4 Component标签</h3>
			<hr />
			<component :is="which"></component>
			<p><button @click="changeTab">切换</button></p>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var componentA = {
				template: '<h4 style="color: red;">我是第一个componentA</h4>'
			};
			var componentB = {
				template: '<h4 style="color: green;">我是第二个componentB</h4>'
			};
			var componentC = {
				template: '<h4 style="color: blue;">我是第三个componentC</h4>'
			};
			var vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello, Vue.js!!',
					which: componentA
				},
				components: {
					'componentA': componentA,
					'componentB': componentB,
					'componentC': componentC
				},
				methods:{
					changeTab: function() {
						if(this.which == componentA){
							this.which = componentB
						}else if(this.which == componentB) {
							this.which = componentC
						}else {
							this.which = componentA
						}
					}
				}
			})
		</script>
	</body>

</html>